<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<style>
.ui-menu {
	width: 200px;
	position: absolute;
}
</style>
<script type="text/javascript">
	var GLOBAL_ItemMain = new ItemMain();
	var GLOBAL_ItemSelected = null;
	$(document).ready(function() {
		// init content
		GLOBAL_ItemMain.init();
	});

	function ItemMain() {
		var _this = this;
		//var _settings = null;

		this.init = function() {
			//set spinners
			$(".grid").html(GLOBAL_Spinner);
			$(".side-bar").html(GLOBAL_Spinner);

			this.initControls();
			this.callItemList();
		};

		this.initControls = function() {
			//init buttons
			$("#createBtn").button({
				icons : {
					primary : "ui-icon-plusthick"
				},
				text : false
			}).click(function() {
				var settings = {
					"title" : "Create item",
					"width" : 800,
					"height" : 400,
					"buttons" : {
						'Create' : function() {

						},
						Cancel : function() {
							$(this).dialog('close');
						}
					},
					"onClose" : function() {
						//
					}
				};
				new Modal(settings).open();
			});
		};

		this.callItemList = function() {
			var settings = {
				"body" : $(".grid"),
				"url" : "getItems",
				"responseFunc" : _this.responseCallItemList
			};
			Call(settings);
		};

		this.responseCallItemList = function(data) {
			if (data == null || data == undefined)
				return /* Handle error*/;
			$(".grid").html("");
			if (data.list.length == 0) {
				$(".grid").html("Nu sint elemente. SQL: +100");
				return;
			}
			var settings = {
				"id" : "idItemGrid",
				"rootPanel" : $('.grid'),
				"name" : "Items",
				"title" : "Item list",
				"head" : [ {
					"name" : "",
					"title" : "",
					"width" : "20px"
				}, {
					"name" : "Id",
					"title" : "",
					"width" : "30px"
				}, {
					"name" : "Name",
					"title" : "Store name",
					"width" : "200px"
				}, {
					"name" : "Category",
					"title" : "Item catergory",
					"width" : "100px"
				} ]
			};
			var storeGrid = new Grid(settings);
		};
	}
</script>

<!-- MAIN LAYOUT -->
<div id="itemMain">
	<div class="container">
		<div class="options">
			<button id="createBtn" title="Create item">&#160;</button>
		</div>
		<div class="grid" style="width: 740px; max-width: 740px;"></div>
		<div class="side-bar"></div>
	</div>
</div>

<!-- MODAL -->

<!-- CONTEXT MENU -->
<ul id="itemMenu" class="contextMenu">
	<li class="icon-view"><a href="#view">View</a></li>
	<li class="icon-edit"><a href="#edit">Edit</a></li>
	<li class="icon-delete"><a href="#delete">Delete</a></li>
	<li><div class="hr"></div></li>
	<li class="icon-opened"><a href="#close">Open</a></li>
	<li class="icon-process"><a href="#">In process</a></li>
	<li class="icon-planned"><a href="#">Planned</a></li>
	<li class="icon-closed"><a href="#close">Close</a></li>
</ul>